<template>
  <div class="px-[4px]">
    <el-button
      :disabled="disabled"
      @click="states.animationClass = ''"
      class="mb-[10px] w-[96%] h-[35px] leading-[35px] !border-[1px] !border-solid !border-[#706969] text-[#ccc] text-[14px] text-center hover:!bg-[#232324]"
    >
      清除动画
    </el-button>

    <div class="bg-[#232324] h-[100%]">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          :title="item.label"
          :name="item.label"
          v-for="item in animations"
          :key="item.label"
        >
          <div class="grid grid-cols-3 gap-x-[9px] gap-y-[10px]">
            <div
              v-for="(it, i) in item.children"
              :key="i"
              @click="
                states.animationClass = `animate__animated animate__${it.value}`
              "
              @mouseover="hoverNames = it.value"
              :class="[
                states.animationClass ==
                `animate__animated animate__${it.value}`
                  ? '!border-[#3a89fe] !text-[#3a89fe]'
                  : '',
                hoverNames == it.value
                  ? `animate__animated animate__${it.value}`
                  : '',
              ]"
              class="h-[33px] leading-[33px] bg-[#373739] text-center cursor-pointer rounded-[5px] transition-all border border-solid border-[#373739]"
            >
              {{ it.label }}
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { animations } from "./animations";
import { ref, computed } from "vue";
let hoverNames = ref("");
const activeNames = ref(["强调动画", "移动动画"]);
let disabled = computed(() => {
  return !states.value.animationClass;
});
const props = defineProps({
  models: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:models", "edit"]);
const states = computed({
  get: () => props.models,
  set: () => emit("update:models"),
});
</script>

<style scoped lang="scss"></style>
